<template>
  <el-dialog draggable v-model="tableParent.daDuiShiGuShuShow" width="50%" :modal="false" :z-index="2001" center>
    <div class="flex flex-col">
      <h1 class="title color-white">{{ tableParent.daDuiShiGuShuName }}</h1>
      <div class="baogao" v-if="tableParent.daDuiShiGuShuList1.length">
        <h5>当前事故数</h5>
        <el-table :data="paginatedTableData1" border style="width: 100%">
          <el-table-column prop="sgbh" label="事故编号" width="200" />
          <el-table-column prop="xzqh" label="行政区划" />
          <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
          <!-- <el-table-column prop="lh" label="路号" /> -->
          <el-table-column prop="lm" label="路名" width="120" />
          <!-- <el-table-column prop="gls" label="公里数" /> -->
          <!-- <el-table-column prop="ms" label="米数" /> -->
          <el-table-column prop="sgdd" label="事故地点" />
          <el-table-column prop="sgrdyy" label="事故认定原因" />
          <el-table-column prop="swrs" label="死亡人数" />
          <el-table-column prop="ssrs" label="受伤人数" />
          <el-table-column prop="zjccss" label="直接财产损失" />
          <!-- <el-table-column prop="sglx" label="事故类型" /> -->
        </el-table>
        <div class="spans">
          <el-pagination :page-size="pageSize1" :current-page="currentPage1" layout="prev, pager, next"
            :total="totalItems1" @current-change="handlePageChange1" />
          <span>总页数：{{ totalPages1 }}</span>
          <span style="">总条数：{{ totalItems1 }}</span>
        </div>
      </div>
      <div class="baogao" v-if="tableParent.daDuiShiGuShuList2.length">
        <h5>昨日事故数</h5>
        <el-table :data="paginatedTableData2" border style="width: 100%">
          <el-table-column prop="sgbh" label="事故编号" width="200" />
          <el-table-column prop="xzqh" label="行政区划" />
          <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
          <!-- <el-table-column prop="lh" label="路号" /> -->
          <el-table-column prop="lm" label="路名" width="120" />
          <!-- <el-table-column prop="gls" label="公里数" /> -->
          <!-- <el-table-column prop="ms" label="米数" /> -->
          <el-table-column prop="sgdd" label="事故地点" />
          <el-table-column prop="sgrdyy" label="事故认定原因" />
          <el-table-column prop="swrs" label="死亡人数" />
          <el-table-column prop="ssrs" label="受伤人数" />
          <el-table-column prop="zjccss" label="直接财产损失" />
          <!-- <el-table-column prop="sglx" label="事故类型" /> -->
        </el-table>
        <div class="spans">
          <el-pagination :page-size="pageSize2" :current-page="currentPage2" layout="prev, pager, next"
            :total="totalItems2" @current-change="handlePageChange2" />
          <span>总页数：{{ totalPages2 }}</span>
          <span style="">总条数：{{ totalItems2 }}</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>


<script lang="ts" setup>
import { useAccidentTableList } from "@/store";

const tableParent = useAccidentTableList();
const totalItems1 = computed(() => tableParent.daDuiShiGuShuList1.length);
const totalPages1 = computed(() =>
  Math.ceil(totalItems1.value / pageSize1.value)
);
const pageSize1 = ref(1);
const currentPage1 = ref(1);

const paginatedTableData1 = computed(() => {
  const start = (currentPage1.value - 1) * pageSize1.value;
  const end = start + pageSize1.value;
  return tableParent.daDuiShiGuShuList1.slice(start, end);
});
const handlePageChange1 = (newPage: number) => {
  currentPage1.value = newPage;
};

const totalItems2 = computed(() => tableParent.daDuiShiGuShuList2.length);
const totalPages2 = computed(() =>
  Math.ceil(totalItems2.value / pageSize2.value)
);
const pageSize2 = ref(1);
const currentPage2 = ref(1);

const paginatedTableData2 = computed(() => {
  const start = (currentPage2.value - 1) * pageSize2.value;
  const end = start + pageSize2.value;
  return tableParent.daDuiShiGuShuList2.slice(start, end);
});
const handlePageChange2 = (newPage: number) => {
  currentPage2.value = newPage;
};
</script>

<style lang="less" scoped>
.baogao {
  display: flex;
  justify-content: center;
  color: white;
  flex-direction: column;

  .cell {
    text-align: center;
  }
}

::v-deep .el-pagination button:disabled,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination>.is-last {
  background: transparent;
}

::v-deep .el-pager li {
  background: transparent;
  color: white;
}

::v-deep .el-pager li.is-active {
  color: #429EA5;
}

.el-table__inner-wrapper {
  text-align: center;
}

::v-deep .cell {
  text-align: center;
}

.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
</style>
